﻿@model myFinance.Models.ViewModels.AvatarViewModel
@{
    Layout = null;
    var incluir = (string)ViewBag.Incluir;
    var imgAvatar = Url.Action("ShowAvatar", "Perfil", new { rand = new Random() { }.Next() });
}
<style type="text/css">
    input[type="button"], input[type="submit"]
    {
        font-size: 0.85em;
        padding: 5px 10px;
        border: 1px solid #1a2e9e;
        background-color: #2d2da9;
        font-weight: normal;
        color: #ffffff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
    }
    input[type="button"]:hover, input[type="submit"]:hover
    {
        border: 1px solid #1a2e9e;
        background-color: #3a3ae4;
        font-weight: normal;
        color: #ffffff;
        cursor: pointer;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
    }
    #botoesupload
    {
        text-align: center;
        margin: 20px auto;
    }
    #boximagem
    {
        border: 1px solid #7768a3;
        text-align: center;
        width: 200px;
        height: 200px;
        line-height: 200px;
        vertical-align: middle;
        margin: 0 auto 10px auto;
    }
    #imgAvatar
    {
        width: 200px;
        height: 200px;
        line-height: 200px;
        vertical-align: middle;
        margin: auto;
        text-align: center;
    }
    #uploaded
    {
        font-size: .85em;
        font-weight: bold;
        color: Green;
        font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
        width: 200px;
        margin: 10px auto;
        height: 60px;
        line-height: 20px;
        vertical-align: middle;
        display: none;
    }
    input#upload
    {
        margin: auto;
        text-align: center;
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
    #formuploadimg
    {
        text-align: center;
    }
    #btnupload
    {
        width: 140px;
        margin: 0 auto;
    }
</style>
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm("Upload", "Perfil", FormMethod.Post, new { id = "formuploadimg", @encType = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    @Html.Hidden("Incluir", incluir)
    <div id="boximagem">
        <img src="@imgAvatar" alt="Avatar" id="imgAvatar" />
    </div>
    <input type="file" id="upload" name="ImageUrl" />
    <div id="botoesupload">
        <input type="button" id="btnupload" value="Escolher imagem" />        
        <input type="submit" value="Enviar" id="enviar" disabled="disabled" />
        <div id="uploaded">
            Imagem selecionada!<br />
            Clique no botão Enviar<br />
            para completar o envio.
        </div>
    </div>
}
<script type="text/javascript">
    $(function () {
        if ($('#Incluir').val() === 'sim') {
            parent.$('#winAvatar').click();
        }
        $('#btnupload').click(function () {
            $('#upload').click();
        });
        $('#upload').change(function () {
            if (verifica_extencao()) {
                $('#uploaded').show();
                $('#enviar').removeAttr('disabled');
            }
        });
        $('#enviar').click(function () {
            if ($('#upload').val() == "") {
                alert("Por favor, escolha uma imagem.");
                return false;
            }
        });
        $('html').click(function () {
            parent.$("#config-perfil").hide();
        });
        function verifica_extencao() {
            var extensoesOk = ",.jpeg,.jpg,";
            var extensao = "," + document.forms[0].ImageUrl.value.substr(document.forms[0].ImageUrl.value.length - 4).toLowerCase() + ",";
            if (document.forms[0].ImageUrl.value == "") {
                alert("O campo do endereço da imagem está vazio!!")
                return false;
            }
            else if (extensoesOk.indexOf(extensao) == -1) {
                alert(document.forms[0].ImageUrl.value + "\nSomente imagens com extensão JPG e JPEG são aceitos.");
                return false;
            }
            else {
                return true; // tamanhos();
            }
        }
        //        function tamanhos() {
        //            tamanhoArqMax = 15000
        //            imagem = new Image();
        //            imagem.src = document.forms[0].ImageUrl.value;
        //            tamanho_imagem = imagem.fileSize
        //            img_tan = tamanho_imagem
        //            if (tamanho_imagem < 0) {
        //                return tamanhos()
        //            }
        //            else if (tamanho_imagem > tamanhoArqMax) {
        //                alert("O tamanho da imagem não permitido!\n\nTamanho máximo permitido: " + tamanhoArqMax + " Bytes");
        //                return false;
        //            }
        //            else {
        //                return true;
        //            }
        //        }
    });
</script>
